<template>
	<!-- 首页8个nav导航进去页面后的顶部tab -->
	<view class="warp flex align-center ">
		<view class="to_home bg_main py-1 px-2" @click="goPages('/pages/home/index')"><image src="@/static/img2/home/to_home.png" mode=""></image></view>
		<scroll-view
			scroll-x="true"
			show-scrollbar="false"
			:scroll-left="scrollLeft"
			:scroll-with-animation="true"
			:scroll-into-view="scrollIndex"
			@scrolltoupper="scrolltoupper"
			@scrolltolower="scrolltolower"
			class="scroll_cont px-2"
		>
			<text class="font_22 pr-3" v-for="(item, index) of tabNav" :key="index" :class="{ c_main: current == index }" @click="tabChange(item, index)" :id="'scroll' + index">
				{{ item }}
			</text>
		</scroll-view>
		<!-- <view class="pr-1" @click="scrollRight">
			<u-icon v-if="derection == 'left'" name="play-right-fill" color="#666666" size="10"></u-icon>
			<u-icon v-else name="play-left-fill" color="#666666" size="10"></u-icon>
		</view> -->
	</view>
</template>

<script>
import { exhibitionIndex } from '@/api/exhibition/exhibition.js';

export default {
	props: {
		navIndex: {
			type: Number,
			default: 0
		},
		allRouter: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			tabNav: ['展会通', '企业汇', '产品库', '看视频', '看海外', '光储真相'],
			current: 0,
			exhibitionId: '', //展会id
			exhibitionState: '', //展会状态
			scrollLeft: 0,
			scrollIndex: '', //定位当前nav
			derection: 'left'
		};
	},
	watch: {
		navIndex(newV) {
			// console.log('navNewV', newV);
			this.current = newV;
		},
		current(newV, oldV) {
			// this.current = newV
			this.scrollIndex = 'scroll' + newV;
		}
	},
	created() {
		this.current = this.navIndex;
		this.getzh();
	},
	methods: {
		getzh() {
			// 获取展会id
			exhibitionIndex()
				.then(res => {
					// console.log("首页获取展会id", res);
					if (res.code == 0) {
						this.exhibitionId = res.id;
						this.exhibitionState = res.activity_status; //展会状态
					}
				})
				.catch(err => {
					console.log('展会id获取失败', err);
				});
		},
		tabChange(val, idx) {
			this.current = idx;
			switch (idx) {
				case 0:
					if (this.exhibitionId == 0) {
						// 跳转展会列表
						uni.reLaunch({
							url: '/subPages/exhibition/list'
						});
						// this.goPages('/subPages/exhibition/list');
					} else {
						// 跳转展会详情
						// if (this.exhibitionState == 1) {
						// 	uni.reLaunch({
						// 		url: '/subPages/exhibition/before?id=' + this.exhibitionId + '&active=' + this.exhibitionState
						// 	});
						// } else {
							uni.reLaunch({
								url: '/subPages/exhibition/index?id=' + this.exhibitionId + '&active=' + this.exhibitionState
							});
						// }
					}
					break;
				case 1:
					uni.reLaunch({
						url: '/subPages/home/company-list/index'
					});
					// this.goPages('/subPages/home/company-list/index');
					break;
				case 2:
					uni.reLaunch({
						url: '/subPages/home/product_data/index'
					});
					// this.goPages('/subPages/home/product_data/index');
					break;
				case 3:
					if (this.allRouter) {
						// uni.reLaunch({
						// 	url: '/subPages/home/video/video_live?navIndex=4&title=看视频'
						// });
						this.goPages('/subPages/home/video/video_live?navIndex=4&title=看视频');
					} else {
						this.$emit('tabChange', val, idx);
					}
					break;
				case 4:
					uni.reLaunch({
						url: '/subPages/web_view_h5/index?url=https://www.solarbeglobal.com/&title=看海外'
					});
					// this.goPages('/subPages/web_view_h5/index?url=https://www.solarbeglobal.com/&title=看海外');
					break;
				case 5:
					if (this.allRouter) {
						// uni.reLaunch({
						// 	url: '/subPages/home/video/video_live?navIndex=8&title=光储真相'
						// });
						this.goPages('/subPages/home/video/video_live?navIndex=8&title=光储真相');
					} else {
						this.$emit('tabChange', val, idx);
					}
					break;
			}

			this.scrollIndex = 'scroll' + idx;
		},
		scrollRight() {
			if (this.derection === 'left') {
				this.scrollLeft = 200;
			} else {
				this.scrollLeft = 0;
			}
		},
		// 滚动到左边
		scrolltoupper(e) {
			this.scrollLeft = 0;
			this.derection = e.detail.direction;
		},
		// 滚动到右边
		scrolltolower(e) {
			this.scrollLeft = 200;
			this.derection = e.detail.direction;
		}
	}
};
</script>

<style lang="scss" scoped>
.warp {
	height: 60rpx;
	line-height: 60rpx;
	background-color: $color5;

	.to_home {
		height: 60rpx;
		// border-bottom-left-radius: 10rpx;
		// border-bottom-right-radius: 10rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.scroll_cont {
		white-space: nowrap;
		width: 80%;
	}
}
</style>
